<!DOCTYPE html>
<html>
    <script type="text/javascript" src="jquery1.7.min.js"></script>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script>
        $(function() {
            
//            $("#start").click(function() {
//                $("#logs").text("przed");
//                setTimeout( function() {
//                    $("#logs").text("po 5 sekundach");
//                }, 5000);
//                $("#logs").text("po");
//            });
            
//            $("button").click(function() {
//                alert("kliknięto przycisk");
//            });

            $("button").click(function() {
                r.setSize(1000,1000);
            });

//            $("button").click(function() {
            var x = 100;
            var y = 100;
            var rx = 30;
            var ry = 20;
//                $("#canvas").append('<svg height="140" width="500"></svg>');
//                $("svg").append('<ellipse cx="' + x + '" cy="' + y + '" rx="' + rx + '" ry="' + ry + '" style="stroke:black;stroke-width:1;fill:green"></ellipse>');
//                $("#canvas").html($("#canvas").html());
//                var r = Raphael("canvas", 500, 140);
//                var ellipse = r.ellipse(x, y, rx, ry);
//                ellipse.attr('fill', "green");

//                console.debug("svg");
//                $("#canvas").append('<svg width="200" height="200"></svg>');
//                $("svg").append('<rect x="10" y="10" height="110" width="110" style="stroke:black;fill:white">');
//                $("rect").append('<animateTransform attributeName="transform" begin="0s" dur="3s" type="rotate" from="0 60 60" to="360 60 60"/>');
//                $("#canvas").html($("#canvas").html());
//                console.debug("raphael");
                r = Raphael("canvas", 200, 200);
                
                var rect = r.rect(10,10,1110-200,1110-200);
//                rect.animate({rotation:360},3000);


//            });
        });
    </script>
    <style>
        button {
            width: 100px;
            height: 30px;
            color: #bfa;
            background: #777;
        }
        #left {
            width: 20%;
            height: 500px;
            float: left;
            border: 1px solid;
        }
        #right {
            width: 1000px;
            height: 400px;
            border: 1px solid;
        }
    </style>
    <body>
        <div id="row">
            <div id="left">cos</div>
            <div id="right">cos2</div>
        </div>
        <br/><br/>
        <button>test</button>
        <div id='canvas'></div>
        <!--        <svg width="200" height="200">
                    <circle cx="50" cy="50" r="30" stroke="green" stroke-width="4" fill="yellow" />
                </svg>-->

        <!--        <svg width="200" height="200">
        
                <rect x="10" y="10" height="110" width="110">
        
                <animateTransform
                    attributeName="transform"
                    begin="0s"
                    dur="3s"
                    type="rotate"
                    from="0 60 60"
                    to="360 60 60"
                    />
                </rect>
        
                </svg>-->
        <br/><br/>
        <!--<button onclick="alert('test');" style="width:100px;height:30px;color:#bfa;background: #777">test</button>-->
<!--        <button>
            test
        </button>-->
        <button id='start'>start</button>
        <div id='logs'></div>
        
    </body>
</html>
